<template>
  <li class="item fx-h-c bg-w b-c">
    <div class="msg fx-h-c">
      <img class="br-5" :src="item.avatar" alt="" />
      <div class="desc">
        <h3 class="name">{{ item.username }}</h3>
        <span class="tag">{{ item.job }}</span>
      </div>
    </div>
    <a-button @click="focus(item.id)" :type="type">{{ focusWord }}</a-button>
  </li>
</template>

<script>
import { handleFocus } from "@/utils/utils";
import { mapState } from "vuex";
export default {
  name: "Focus-Item",
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      foc: false,
    };
  },
  computed: {
    ...mapState(['user']),
    focusWord() {
      return this.foc ? "已关注" : "关注";
    },
    isFocus() {
      return this.foc ? true : false;
    },
    type() {
      return this.foc ? "primary" : "default";
    },
  },
  created() {
    // 获取关注的人
    const follows = this.user.follows;
    // 从当前用户关注的用户的列表查看是否有这个用户
    this.foc = !!(
      follows &&
      follows.find((a) => {
        return this.item.id === a.id;
      })
    );
  },
  methods: {
    async focus(id) {
      await handleFocus(id, this);
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  padding: 2rem;
  justify-content: space-between;
  .msg {
    img {
      width: 5rem;
      height: 5rem;
      margin-right: 1rem;
    }
    .name {
      font-weight: bold;
    }
    .tag {
      color: #b9c0c8;
      font-size: 1.3rem;
    }
  }
}
</style>